<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 千分位</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h4>说明：这个版本是针对保留两位小数的浮点数进行过滤格式化的</h4>
			<input type="number" v-model="num" />
			<h4>￥</h3>
			<h2>{{num|NumFormat1}}</h2>
			<h5>{{num|NumFormat2}}</h3>
		</div>
		<script>
			Vue.filter('NumFormat1', function(value) {
				if (!value) return '0.00';

				var value2Array = value.split(".");
				var intPart = value2Array[0]; //获取整数部分
				var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
				return intPartFormat;
			});


			Vue.filter('NumFormat2', function(value) {
				if (!value) return '0.00';

				var value2Array = value.split(".");

				var floatPart = ".00"; //预定义小数部分
				
				if(value2Array[1] === undefined)
					return floatPart;
				floatPart = value2Array[1] + ""; //拿到小数部分
				if (floatPart.length == 1) { //补0,实际上用不着
					return "." + floatPart + '0';
				} else {
					return "." + floatPart;
				}
			});

			var app = new Vue({
				el: "#app",
				data: {
					num: 0
				}
			})
		</script>
	</body>
</html>
